import QtQuick 1.0
import com.nokia.symbian 1.0
import Qt.labs.components.native 1.0
import "Views"
import "js/Colors.js" as Colors
import "js/DatabaseEngine.js" as DB

Rectangle {
    id: mainWindow
    width: 1000
    height: 800
    radius: 0
    gradient: Gradient {
        GradientStop {
            position: 0
            color: "#ffffff"
        }

        GradientStop {
            position: 1
            color: "#F7F7F7"
        }
    }
    // Background image.
    Image {
        id: bgImage
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        source: ":images/background.png"
        fillMode: Image.PreserveAspectFit
        smooth: true
    }
    border.color: "#000000"
    smooth: false
    Text {
        id: header1
        x: 15
        y: 53
        color: "#00a602"
        text: qsTr("What To Eat")
        font.pointSize: 14
        font.family: "Segoe UI"
        font.bold: true
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
    }
    Text {
        id: header2
        x: 15
        y: 53
        text: qsTr("Your Personal Menu Generator")
        font.italic: false
        font.family: "Segoe UI"
        font.bold: true
        anchors.left: header1.left
        anchors.top: header1.bottom
        anchors.topMargin: 15
    }


    // define a tab bar with three buttons and link them to the content
    MenuView {
        id: menuview
        x: 10
        y: 184
        viewWidth: 800
        viewHeight: 500
        bgColor: Colors.viewBgColor
        anchors.top: buttonrow1.bottom
        anchors.topMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 10
    }

    ToolBar {
        id: toolbar1
        width: 360
        height: 578
        anchors.verticalCenter: mainWindow.verticalCenter
        anchors.right: parent.right
        anchors.leftMargin: 20
    }

    ShoppingListTools{
        id: shoppingListTools
        width: 0
        height: 578
        anchors.verticalCenter: mainWindow.verticalCenter
        anchors.right: parent.right
        anchors.leftMargin: 20
    }

    RecepiesTools{
        id: recepiesTools
        width: 0
        height: 578
        anchors.verticalCenter: mainWindow.verticalCenter
        anchors.right: parent.right
        anchors.leftMargin: 20
        onAddRecepieButtonClicked: addRecepieView.visible = true
        onSearchRecepieButtonClicked: {
            if( recepiesTools.searchWord != "" ){
                recepiesView.fillRecipesModel( DB.recipesForSearchWord( recepiesTools.searchWord ) );
            }
        }
    }

    ButtonRow {
        id: buttonrow1
        x: 15
        y: 130
        width: 350
        height: 40

        Button {
            id: menuButton
            x: 19
            y: 0
            text: "Menu"
            onClicked: {
                mainWindow.state = "menuOn"
            }
        }

        Button {
            id: shoppingListButton
            x: 85
            y: 0
            text: "Shopping List"
            onClicked: {
                mainWindow.state = "shoppingListOn"
            }
        }

        Button {
            id: recepiesButton
            x: 201
            y: 0
            text: "Recepies"
            onClicked: {
                mainWindow.state = "recepiesOn"
            }
        }
    }

    // Add recipe view.
    AddRecipeView{
        id: addRecepieView
        height: parent.height * 0.8
        width: parent.width * 0.8
        anchors.centerIn: parent
        radius: 10
        border.width: 5
        border.color: Colors.borderColor
        visible: false
        z: 1000
    }

    // Recipes view.
    RecipesView{
        id: recepiesView
        x: 10
        y: 184
        viewWidth: 800
        viewHeight: 500
        bgColor: Colors.viewBgColor
        anchors.top: buttonrow1.bottom
        anchors.topMargin: 20
        anchors.left: parent.left
        anchors.leftMargin: 10
    }

    Rectangle{
        id: bgDimmer
        anchors.fill: parent
        opacity: 0.7
        color: Colors.borderColor
        visible: addRecepieView.visible
        z: 500
        MouseArea{
            anchors.fill: parent
            onClicked: {}
        }
    }


    states: [
        State {
            name: "menuOn"
            PropertyChanges {
                target: toolbar1
                width: 360
                opacity: 1
                visible: true
            }
            PropertyChanges {
                target: shoppingListTools
                width: 0
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: recepiesTools
                width: 0
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: menuview
                bgOpacity: Colors.bgOpacity
                visible: true
            }
            PropertyChanges {
                target: recepiesView
                opacity: 0
                visible: false
            }
        },
        State {
            name: "shoppingListOn"
            PropertyChanges {
                target: toolbar1
                width: 0
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: shoppingListTools
                width: 360
                opacity: 1
                visible: true
            }
            PropertyChanges {
                target: recepiesTools
                width: 0
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: menuview
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: recepiesView
                opacity: 0
                visible: false
            }
        },
        State {
            name: "recepiesOn"
            PropertyChanges {
                target: recepiesTools
                width: 360
                opacity: 1
                visible: true
            }
            PropertyChanges {
                target: toolbar1
                width: 0
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: shoppingListTools
                width: 0
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: menuview
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: menuview
                opacity: 0
                visible: false
            }
            PropertyChanges {
                target: recepiesView
                bgOpacity: Colors.bgOpacity
                visible: true
            }
        }
    ]
    Component.onCompleted: {
        mainWindow.state = "menuOn";
//        DB.dropTables();
        DB.initDB();
//        DB.clearRecipes();
    }
}
